<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>
<!-- 
    render渲染组建 是全部替换el代表的组建
    components方式 更精细  不会替换
 -->
<body>
    <div id="app">
        <!-- <login></login> -->
    </div>

    <script>

        var login = {
            template:'<div>这是登陆组件</div>'
        }

        var vm = new Vue({
            el:'#app',
            data:{},
            methods: {
                
            },
            // 原始的渲染组建的方式
            // components:{
            //     login
            // },
            render:function(createElements){
                // createElements是一个方法 调用它 能够把指定的组件模板 渲染为html结构
                // return会通过login组件 替换app  页面中不再有app-div
                return createElements(login)
            }
        })
    </script>
</body>
</html>